<template>
  <d2-container>
    <div class="row-ac pb-2">
      <div><el-button type="warning" @click="addCategory" icon="el-icon-plus">添加小说</el-button></div>
      <div class="ml-2"><el-button type="danger" icon="el-icon-delete">批量删除</el-button></div>
    </div>
    <div class="d-f">
      <div class="category-tree">
        <div class="category-tree-title row text-white">小说分类列表</div>
        <div class="flex-1 mt-2">
          <el-tree :data="categoriesTree" :props="defaultProps" accordion @node-click="handleNodeClick">
          </el-tree>
        </div>
      </div>
      <div class="flex-1 ml-2">
        <el-table :data="novelList" stripe>
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" label="序号" type="index" width="65" />
          <el-table-column align="center" label="小说名称" prop="name" width="100" />
          <el-table-column align="center" label="图标" prop="image" width="90">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <el-image slot="reference" style="width: 40px; height: 52px" :src="scope.row.cover_image" fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="scope.row.cover_image" fit="contain" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" label="分类名称" prop="category_name" width="130" />
          <el-table-column align="center" label="添加时间" prop="create_time" width="130" />
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="chapterEdit(scope.row.id)">小说章节</el-button>
              <el-button size="mini" @click="novelEdit(scope.row.id)">修改</el-button>
              <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex-1 mt-3">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="novelTotal">
          </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="42%" title="添加/编辑小说">
          <el-form :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item label="名称" prop="name">
              <div style="width: 50%;">
                <el-input v-model="form.name"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="分类" prop="user">
              <div style="width: 50%;">
                <el-select v-model="form.category" placeholder="请选择">
                  <el-option v-for="item in categoriesList" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="小说状态" prop="novel_state">
              <el-select v-model="form.novel_state" placeholder="选择状态">
                <el-option v-for="state in novelState" :key="state.value" :label="state.name"
                  :value="state.value"></el-option>
              </el-select>
            </el-form-item>
            <div class="flex-1 row-ac">
              <div>
                <el-form-item label="是否推荐" prop="is_recommend">
                  <el-switch v-model="form.is_recommend"></el-switch>
                </el-form-item>
              </div>
              <div class="ml-2">
                <el-form-item label="是否热门" prop="is_hot">
                  <el-switch v-model="form.is_hot"></el-switch>
                </el-form-item>
              </div>
              <div class="ml-2">
                <el-form-item label="是否新书" prop="is_new">
                  <el-switch v-model="form.is_new"></el-switch>
                </el-form-item>
              </div>
            </div>
            <div class="flex-1 row-ac">
              <div class="ml-2">
                <el-form-item label="是否置顶" prop="is_topping">
                  <el-switch v-model="form.is_topping"></el-switch>
                </el-form-item>
              </div>
              <div class="ml-2">
                <el-form-item label="是否特置" prop="is_special">
                  <el-switch v-model="form.is_special"></el-switch>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="作者" prop="user">
              <div style="width: 50%;">
                <el-select v-model="form.user" placeholder="请选择">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username"
                    :value="item.id"></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="图标" prop="cover_image">
              <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleSuccess"
                :before-upload="beforeUpload">
                <img v-if="form.cover_image" :src="form.cover_image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="小说简介" prop="introduction">
              <div style="width: 90%;">
                <el-input type="textarea" v-model="form.introduction" :rows="12"></el-input>
              </div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="clickCancel">取 消</el-button>
            <el-button type="primary" v-if="dialogSubmit" @click="submitForm">确 定</el-button>
            <el-button type="primary" v-if="dialogEdit" @click="handleEdit">保 存</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    novelUpdateUrl,
    novelDetailUrl,
    novelDeleteUrl,
    novelCreateUrl,
    novelListUrl,
    novelcategoryListUrl,
    novelcategoryTreeUrl,
  } from '@/utils/novel'
  import {
    userListUrl,
    imagesUploadUrl,
  } from '@/utils/interface'
  import {
    baseURL
  } from '@/utils/request'
  export default {
    name: 'productCategory',
    data() {
      return {
        categoriesList: [],
        categoriesTree: [],
        novelList: [],
        userList: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        dialogVisible: false,
        dialogSubmit: false,
        dialogEdit: false,
        form: {
          name: '',
          user: '',
          category: '',
          cover_image: '',
          introduction: '',
          is_topping: false,
          is_hot: false,
          is_new: false,
          is_recommend: false,
          is_special: false,
          novel_state: ''
        },
        novelState: [{
            value: 0,
            name: '更新中'
          },
          {
            value: 1,
            name: '停更'
          },
          {
            value: 2,
            name: '已完结'
          },
        ],
        props: {
          value: 'id',
          label: 'name',
        },
        rules: {
          name: [{
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }]
        },
        queryInfo: {
          page: 1,
          pageSize: 10
        },
        total: 1,
        actionUrl: baseURL + imagesUploadUrl,
        takeNoveId: '',
        novelTotal: 1
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getCategoriesList()
        this.getCategoriesTree()
        this.getNovelList()
        this.getUserList()
      },
      getUserList() {
        this.$get(userListUrl).then(res => {
          this.userList = res.data.data.list
          this.userTotal = res.data.data.total
        })
      },
      getCategoriesList() {
        this.$get(novelcategoryListUrl).then(res => {
          this.categoriesList = res.data.data.list
          this.total = res.data.data.total
        })
      },
      getNovelList() {
        this.$get(novelListUrl, this.queryInfo).then(res => {
          this.novelList = res.data.data.list
          this.novelTotal = res.data.data.total
        })
      },
      getCategoriesTree() {
        this.$get(novelcategoryTreeUrl, this.queryInfo).then(res => {
          this.categoriesTree = res.data.data.list
        })
      },
      handleNodeClick(data) {

      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.pageSize = newSize
        this.getNovelList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getNovelList()
      },
      addCategory() {
        this.dialogVisible = true
        this.dialogEdit = false
        this.dialogSubmit = true
      },
      clickCancel() {
        this.dialogVisible = false
        this.form = {}
        this.form.cover_image = ''
      },
      // 提交表单
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$post(novelCreateUrl, this.form).then(res => {
              this.getNovelList()
              this.dialogVisible = false
              this.$message.success('添加成功')
              this.form = {}
              // 刷新分类列表
              this.$emit('refresh')
            })
          } else {
            return false
          }
        })
      },
      openDelete(novelId) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 在确定时执行handleDelete的删除
          this.handleDelete(novelId);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleDelete(novelId) {
        this.$del(novelDeleteUrl + novelId + '/').then(res => {
          this.getNovelList()
        })
      },
      handleSuccess(val) {
        this.form.cover_image = val.data.url
      },
      beforeUpload() {

      },
      novelEdit(novelId) {
        this.dialogVisible = true
        this.dialogEdit = true
        this.dialogSubmit = false
        this.takeNoveId = novelId
        this.$get(novelDetailUrl + novelId + '/').then(res => {
          this.form = {
            name: res.data.data.name,
            user: res.data.data.user,
            category: res.data.data.category,
            cover_image: res.data.data.cover_image,
            introduction: res.data.data.introduction,
            novel_state: res.data.data.novel_state,
            is_topping: res.data.data.is_topping,
            is_recommend: res.data.data.is_recommend,
            is_hot: res.data.data.is_hot,
            is_new: res.data.data.is_new,
            is_special: res.data.data.is_special
          }
        })
      },
      handleEdit() {
        this.$put(novelUpdateUrl + this.takeNoveId + '/', this.form).then(res => {
          if (res.data.code == 200) {
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '修改成功'
            });
            this.getNovelList()
            this.form = {}
          }
        })
      },
      chapterEdit(NoveId) {
        this.$router.push({
          path: '/chapter',
          query: {
            noveId: NoveId
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .category-tree {
    width: 18%;

    .category-tree-title {
      height: 38px;
      min-height: 38px;
      background-color: #62A8D1;
    }
  }

  .el-tree-node__content {
    height: 42px;
  }
</style>
